// 渐变动画
.fade-enter-active {
  animation: fade-in .3s;
}
.fade-leave-active {
  animation: fade-in .35s reverse;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// 底部滑出动画
.slide-enter-active {
  animation: slide-in .2s ease-in-out;
}
.slide-leave-active {
  animation: slide-in .15s reverse ease-in-out;
}
@keyframes slide-in {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

// 旋转动画
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 放大
@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.g-transition-menu-right-enter-active {
  animation: menu-right 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.g-transition-menu-right-leave-active {
  animation: menu-left 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.g-transition-menu-left-leave-active {
  animation: menu-right 0.3s cubic-bezier(0.76, 0, 0.24, 1) reverse;
}
.g-transition-menu-left-enter-active {
  animation: menu-left 0.3s cubic-bezier(0.76, 0, 0.24, 1) reverse;
}
@keyframes menu-right {
  0% {
    opacity: 0;
    transform: translateX(100vw);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes menu-left {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100vw);
  }
}

